<template>
	<div id="insuranceDetail">
		<ul v-for="(item,key) in insurance">
			<li>
				<div><span class="insuranceType">{{key}}</span></div>
				<div>{{item.length}}份</div>
			</li>
			<li v-for="i in item">
				<div>{{i.holderName}}</div>
				<div>
					<span class="policy" v-if="i.insuranceCompany=='人保'&&i.status==4" @click='download(i.polyUrl)'>电子保单</span>
					<span class="policy" v-if="i.insuranceCompany=='众安'&&i.status==4" @click='viewload'>保单查询</span>
					<span>{{i.status|insuranceStatus}}</span>
				</div>
			</li>						
		</ul>
		<ul>
			<li v-if='insuranceOrder.polyNo'>
				<div>保险单号</div>
				<div>{{insuranceOrder.polyNo}}</div>
			</li>
			<li v-if='insuranceOrder.createTime'>
				<div>下单时间</div>
				<div>{{insuranceOrder.createTime}}</div>
			</li>
			<li v-if='insuranceOrder.orderTime'>
				<div>出保时间</div>
				<div>{{insuranceOrder.orderTime}}</div>
			</li>
			<li>
				<div>保险单总价</div>
				<div class="total">￥{{insuranceOrder.total}}</div>
			</li>
		</ul>
	</div>
</template>
<script>	
	import { mapState, mapMutations } from 'vuex'
	import { getNewToken } from '../../config/util'
	export default {
		data() {
			return {
				insurance:null,
				insuranceOrder:{'polyNo':'--','createTime':'--','total':'--','orderTime':'--'}
			};
		},
		computed:{
			...mapState([
				'token','orderDetail'
			]),	
		},
		methods:{
			...mapMutations([
				'RECORD_TOKEN'
			]),
			getInsuranceDetail(){
				var that = this;
				this.$axios.get('insurance/insureOrders/'+this.orderDetail.orderNumber, {
						headers: { 'authorization': this.token }
					})
					.then((res) => {
						this.RECORD_TOKEN({ type: "update", val: getNewToken(res.headers) });
						var result = res.data;
						if(JSON.stringify(result) != "{}"){
							this.insurance = result;
							getMess(result)
						}
					})	
					
				function getMess(result){
					var index = 0;
					var total = 0;
					for(var i in result){
						if(index==0){
							that.insuranceOrder.createTime = result[i][0].createTime;
							that.insuranceOrder.polyNo = result[i][0].polyNo;
							that.insuranceOrder.orderTime = result[i][0].orderTime;
						}
						for(var j=0;j<result[i].length;j++){
							total += result[i][j].insuranceFee - result[i][j].preferential;
						}
						index++
					}
					that.insuranceOrder.total = total;
				}
			},
			//下载电子保单
			download(polyUrl){				
				window.location.href = polyUrl
			},
			//保单查询
			viewload(){
				window.location.href = "https://www.zhongan.com/open/policy/policySearch1"
			}
		},
		created() {
			document.title = "保险单详情";
			//获取保险详情
			this.getInsuranceDetail();
		},		
		components: {
			
		}
	};
</script>
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
	#insuranceDetail{
		padding:0 4%;
        li{
            height:0.4rem;
            @include fj();
            align-items: center;                     
            .insuranceType{
                color:$blue;
            }
            .total{
            	color:$orange;
            }
            .policy{
            	border:1px solid $blue;
            	color:$blue;
            	padding:3px 5px;
            	border-radius: 2px;
            	margin-right:5px;
            }
        }
    }

</style>